<script setup lang="ts">
import { useK8SApi } from "@/views/domain/kubeHud/api/k8s/k8s";
import { Deployment } from "@/views/domain/kubeHud/api/k8s/types";
import { computed, ref } from "vue";

const { deploymentRepo } = useK8SApi();

const deployModel = defineModel<Deployment>();
const deployList = ref<Deployment[]>([]);
const loading = ref(false);

const _selection = computed<string>({
  get() {
    return deployModel.value?.metadata?.name ?? "";
  },
  set(val) {
    deployModel.value =
      deployList.value.find(deploy => deploy.metadata.name === val) ??
      undefined;
  }
});

const getDeployList = async (query?: string) => {
  try {
    const { ok, data } = await deploymentRepo.getDeploymentList({});
    if (ok) {
      deployList.value = data.items;
    }
  } catch (error) {
    console.error(error);
  }
};
</script>

<template>
  <el-select
    v-model="_selection"
    placeholder="Select Deployment"
    filterable
    remote
    reserve-keyword
    :loading="loading"
    :remote-method="getDeployList"
  >
    <el-option
      v-for="deploy in deployList"
      :key="deploy.metadata.name"
      :label="deploy.metadata.name"
      :value="deploy.metadata.name"
    />
  </el-select>
</template>
<style lang="scss" scoped></style>
